<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>

<body>
    <div id="app">
        <kd @manba="hanlder"></kd>
        <curry :green="choose" :ipt="ipt"></curry>
    </div>


    <!-- 功能按钮组件的html模板 -->
    <template id="curry">
        <div>
        <textarea name="" id="" cols="30" rows="10" v-model.trim="ipt" @keyup.enter="hanlder"></textarea>
        <button @click="hanlder">按钮</button>
        </div>
    </template>



    <!-- 输出内容组件的html模板 -->
    <template id="kd">
        <div>
            <div v-for="(item,index) in green">
                {{item.name}}&nbsp;&nbsp;&nbsp;{{item.count}}
                <button @click="add(index)">点赞</button>
                <button @click="topping(index)">置顶</button>
                <button @click="remove">删除</button>
            </div>
        </div>
    </template>

</body>
<script src="./vue.js"></script>
<script>
    // 功能按钮组件
    let kd = {
        template: '#curry',
        data() {
            return {
                ipt: '',
            }
        },
        methods: {
            hanlder() {
                this.$emit("manba", this.ipt)
                this.ipt = ''
            },

        }
    }


    // 输出内容组件
    let curry = {
        template: '#kd',
        // props: ['green', 'ipt'],
        props: {
            green: Array,
            ipt: String
        },
        data() {
            return {}
        },
        methods: {
            add(i) {
                this.green[i].count++;
            },
            remove() {
                this.green.shift()
            },
            topping(i) {
                this.green.unshift(this.green.splice(i, 1)[0])
            }
        }
    }


    // Vue实例对象
    let vm = new Vue({
        el: '#app',
        data: {
            ipt: '',
            choose: []
        },
        components: {
            curry,
            kd
        },
        methods: {
            hanlder(data) {
                this.ipt = data
                if (this.ipt === '') return
                let obj = {
                    name: this.ipt,
                    count: 0
                }
                this.choose.push(obj)
                this.ipt = ''
            },
        }
    })
</script>


</html>